
<div class="container-fluid">
  <div class="toolbar">
    <button class="btn btn-sm btn-success" id="add-bush-btn" data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-type="add" data-mtype="1" data-level="0">添加</button>
  </div>

  <table id="table"></table>
</div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title" data-mtype="">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="form-title"></h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="menu-name"  class="control-label">菜单名称：</label>
            <input type="text" class="form-control" id="menu-name">
          </div>
          <!--<div class="form-group">
            <label for="menu-type"  class="control-label">菜单类型：</label>
            <div class="example-box">
              <label class="lyear-radio radio-inline radio-primary">
                <input type="radio" name="menu-type" value="1" ><span>目录</span>
              </label>
              <label class="lyear-radio radio-inline radio-primary">
                <input type="radio" name="menu-type" value="2"><span>菜单</span>
              </label>
            </div>
          </div>-->
          <div class="form-group">
            <label for="sequence"  class="control-label">序号：</label>
            <input type="number" class="form-control" id="sequence">
          </div>
          <div class="form-group">
            <label for="code"  class="control-label">唯一Code：</label>
            <input type="text" class="form-control" id="code">
          </div>
          <div class="form-group">
            <label for="url"  class="control-label">地址Url：</label>
            <input type="text" class="form-control" id="url">
          </div>
          <div class="form-group">
            <label for="icon"  class="control-label">Icon：</label>
            <input type="text" class="form-control" id="icon">
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit">确定</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

  $(function (){

    let app={
      tableObj:$('#table'),
      modalObj:$('#modal-form'),
      menuNameObj:$('#menu-name'),
      sequenceObj:$('#sequence'),
      codeObj:$('#code'),
      urlObj:$('#url'),
      iconObj:$('#icon'),
      btnSubmitObj:$('#submit'),
      init:function (){
        let self = this;
        self.initTable()
        self.event()

      },
      initTable:function (){

         let self = this;
         self.tableObj.initTreeTable({
           url: "/admin/menu/list",
           columns: [
             {
               title: '菜单名称',
               field: 'name',
               width: '20%',
             },
             {
               title: '菜单编码',
               field: 'code',
               width: '15%',
             },
             {
               field: 'sequence',
               title: '排序',
               width: '15%',
               align: "left",
             },
             {
               field: 'url',
               title: '请求地址',
               width: '20%',
               align: "left",
               formatter:function (value){
                 if(!value){
                   return "---";
                 }
                 return value;
               }
             },
             {
               title: '类型',
               field: 'menu_type',
               width: '10%',
               align: "center",
               valign: "top",
               formatter: function(value,item, index) {
                 if (value === 1) {
                   return '<span class="label label-success">目录</span>';
                 }
                 else if (value === 2) {
                   return '<span class="label label-primary">菜单</span>';
                 }
                 else if (value === 3) {
                   return '<span class="label label-warning">按钮</span>';
                 }
               }
             },
             {
               title: '操作',
               width: '20%',
               align: "center",
               formatter: function(value,row, index) {
                 let actions = [];
                 actions.push('<a data-toggle=\'modal\' data-target=\'#modal-form\' data-whatever=\'@mdo\' class="btn btn-success btn-xs "  data-id='+row["id"]+' data-type="edit" href="#">编辑</a> ');
                 if(row["menu_type"]===1){
                   actions.push('<a   data-mtype="2" data-toggle=\'modal\' data-target=\'#modal-form\' data-whatever=\'@mdo\' class="btn btn-info btn-xs " data-id='+row["id"]+'  data-type="add"  data-level='+row["level"]+'  href="#">添加</a> ');
                 }
                 actions.push('<a class="btn btn-danger btn-xs "   href="#" >删除</a>');
                 return "<div class='btn-group operator-group' >"+actions.join('')+"</div>";
               }
             }],
           formatServerData:function (res){
             return res.data;
           }
         });

      },
      event:function (){
        let self = this;
        self.modalObj.on('show.bs.modal', function (event) {

          let button = $(event.relatedTarget),
                  dType = button.data('type'),
                  modal = $(this),
                  nameObj=self.menuNameObj,
                  // menuTypeObj=$('input[name=menu-type]'),
                  sequenceObj=self.sequenceObj,
                  codeObj=self.codeObj,
                  iconObj=self.iconObj,
                  urlObj=self.urlObj
          id=button.data('id')
          mType=parseInt(button.data('mtype')),
                  level=parseInt(button.data('level'));
          modal.attr('data-mtype',mType);
          modal.attr('data-type',dType);
          modal.attr('data-id',id);
          modal.attr('data-level',level);
          switch (dType){
            case 'edit':

              doGet("/admin/menu/find?id="+id,function(data){

                if(data.data){
                  nameObj.val(data.data.name);
                  $('input[name=menu-type][value="'+data.data.menu_type+'"]').prop('checked',true);
                  sequenceObj.val(data.data.sequence);
                  codeObj.val(data.data.code);
                  iconObj.val(data.data.icon);
                  urlObj.val(data.data.url)
                }

              },function(data){

              })
              modal.find('.modal-title').text('编辑')
              return
            case 'add':
              if(mType===1){
                modal.find('.modal-title').text('创建目录')
              }else{
                modal.find('.modal-title').text('创建菜单')
              }

          }

        }).on('hide.bs.modal',function (event){
              self.restModal();
        })

        self.btnSubmitObj.click(function (){


          let modal=self.modalObj,
                  dType = modal.attr('data-type'),
                  nameObj=self.menuNameObj,
                  // menuTypeObj=$('input[name=menu-type]'),
                  sequenceObj=self.sequenceObj,
                  codeObj=self.codeObj,
                  iconObj=self.iconObj,
                  urlObj=self.urlObj,
                  id=parseInt(modal.attr('data-id')),
                  mType=parseInt(modal.attr('data-mtype')),
                  level=parseInt(modal.attr('data-level'));

          switch (dType){
            case 'edit':
                doPost("/admin/menu/update",{
                  "id":id,
                  "name":nameObj.val(),
                  "url":urlObj.val(),
                  "icon":iconObj.val(),
                  "code":codeObj.val(),
                  "momo":"",
                  "sequence":parseInt(sequenceObj.val()),
                },function(data){
                    self.refreshTable();
                })
              return
            case 'add':
              doPost("/admin/menu/add",{
                "pid":id,
                "name":nameObj.val(),
                "url":urlObj.val(),
                "icon":iconObj.val(),
                "code":codeObj.val(),
                "momo":"",
                "sequence":parseInt(sequenceObj.val()),
                "menu_type":mType,
                "level":level+1
              },function(data){
                   self.refreshTable();
              })

          }


        })

      },
      restModal:function(){
          let self = this;
          self.menuNameObj.val("")
          self.sequenceObj.val("")
          self.codeObj.val("")
          self.urlObj.val("")
          self.iconObj.val("")
      },
      refreshTable:function (){
          let self = this;
          self.tableObj.bootstrapTreeTable('refresh');
      }

    }
    app.init();

  });





</script>

